<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card v-loading="loading">
        <el-tabs>
          <el-tab-pane label="组织架构" />
        </el-tabs>
        <div class="tree-card">
          <!-- tree-tools组件(显示公司概括) -->
          <tree-tools :node-data="myCompany" :is-root="true" @addDepart="addDepart" />
          <hr>
          <!-- 树状菜单 -->
          <el-tree :data="departments" :props="defaultProps" default-expand-all>
            <template v-slot="{ data }">
              <!--tree-tools组件 显示公司各部门 -->
              <tree-tools
                :node-data="data"
                @getDepartments="getDepartments"
                @addDepart="addDepart"
                @editDepart="editDepart"
              />
            </template>
          </el-tree>
        </div>
      </el-card>

      <!--添加部门/编辑（弹窗组件） -->
      <add-dept
        ref="echo"
        :show-dialog="showDialog"
        :current-node="currentNode"
        @close="showDialog=false"
        @getDepartments="getDepartments"
      />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/TreeTools'
import AddDept from './components/AddDept'
import { getDepartments } from '@/api/departments'
import { listToTree } from '@/utils/index'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // 各个部门
      departments: [],

      // 指定显示的文本
      defaultProps: {
        label: 'name',
        children: 'children'
      },

      myCompany: {
        name: '江苏传智播客',
        manager: '负责人',
        // 在最根级的tree-tools组件中，
        // 由于node属性中没有id，id便是undefined，
        // 但是通过undefined进行等值判断是寻找不到对应的根节点的(没有子部门)，
        // 所以在传值时，我们将id属性设置为 ""
        id: ''
      },

      // loading效果
      loading: false,

      // 控制弹窗的显示或隐藏
      showDialog: false,
      // 点击的部门（由子组件传过来）
      currentNode: {}
    }
  },

  created() {
  // 获取全部部门
    this.getDepartments()
  },

  methods: {
    // 获取全部部门
    // 重新渲染各个部门（子组件修删除了数据）
    async getDepartments() {
      this.loading = true
      const res = await getDepartments()
      console.log(res)
      this.departments = listToTree(res.depts)
      // 部门总称
      this.myCompany.name = res.companyName
      this.loading = false
    },

    // 添加部门
    addDepart(nodeData) {
      this.showDialog = true
      this.currentNode = nodeData
    },

    // 弹出编辑框
    editDepart(nodeData) {
      this.showDialog = true
      this.currentNode = nodeData
      // 回显(AddDept组件显示数据)
      // 以下回显没有获取到最新部门信息，可能被改了
      // this.$refs.echo.form = this.currentNode
      // 回显（调用接口，让AddDept组件发送请求）
      this.$refs.echo.getDepartDetail(this.currentNode.id)
    }
  }
}
</script>

<style lang='scss' scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
  ::v-deep {
    .el-icon-caret-right:before {
      content: "\e723";
      color: #000;
    }
    .el-tree-node__expand-icon.expanded {
      transform: rotate(0deg);
    }
    .el-tree-node__expand-icon.expanded::before {
      content: "\e722";
      color: #000;
    }

    .el-tree-node__expand-icon.is-leaf::before {
      content: "\e7a5";
      color: #000;
    }
  }
}
</style>
